<template>
  <div v-drag>
    <div @click="closePopup(false)" class="mask"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ '新增' }}破损单</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>仓库：</span>
          <div :class="{'error_border':tip_num===1}">
            <el-select placeholder="请选择仓库" v-model="warehouseId" :popper-append-to-body="false" value-key="id">
              <el-option
                :key="item.id"
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in warehouseList">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>商品：</span>
          <div :class="{'error_border':tip_num===2}">
            <el-select placeholder="请选择商品" v-model="productId" :popper-append-to-body="false" value-key="id">
              <el-option
                :key="item.id"
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in productList">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>破损数：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input
              type="number"
              placeholder="请输入破损数"
              v-model="numbers">
            </el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab">备注：</span>
          <div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入备注"
              v-model="remark">
            </el-input>
          </div>
        </div>

        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getAllWarehouse} from "@/api/basic/warehouse";
  import {listAllData} from "@/api/config/product";
  import {addBrokenOrder} from "../../../api/basic/warehouse/brokenOrder";
  import commons from "@/utils/common";
  import {judgeRole} from "@/utils/warehouseAuth";

  export default {
    props: ['mid', 'isModify'],
    data() {
      return {
        warehouseId: '',
        productId: '',
        warehouseList: [],
        productList: [],
        isFinal:false,
        infoTip: '',
        tip_num: '',
        numbers:'',
        remark:'',
        loading: false,

      }
    },
    mounted() {
      let roleHouse = judgeRole();
      this.warehouseList = roleHouse.list;
      this.warehouseId = roleHouse.id;
      this.productData();
    },
    methods: {
      // getDetail() {
      //   let that = this;
      //   this.loading = true;
      //   addBrokenOrder(that.mid).then(res => {
      //     if (res) {
      //       that.setData(res);
      //     }
      //     that.loading = false;
      //   }).catch((e) => {
      //     that.loading = false;
      //   });
      // },


      //仓库列表
      warehouseData() {
        let that = this;
        getAllWarehouse('').then(res => {
          that.warehouseList = res ? res : [];
        }).catch((e) => {
          that.warehouseList = [];
        });
      },

      //仓库商品列表
      productData() {
        let that = this;
        listAllData().then(res => {
          that.productList = res ? res : [];
        })
      },
      // 确认编辑
      confirmEdit() {
        if (this.warehouseId === '') {
          this.setTip(1, '请选择仓库！');
        } else if (this.productId === '') {
          this.setTip(2, '请选择商品！');
        } else if (this.numbers === '') {
          this.setTip(3, '请输入破损数！');
        }else {
          this.sendInfo();
        }
      },
      sendInfo() {
        let that = this;
        that.loading = true;
        let data = {
          warehouseId: that.warehouseId,
          productId: that.productId,
          numbers:that.numbers,
          remark: that.remark,
        };
          addBrokenOrder(data).then(res => {
            that.closePopup(true);
            that.$message.success({
              message:'操作成功！',
              duration:1500
            });
            that.loading = false;
          }).catch((e) => {
            that.loading = false;
          });
      },

      isEnough(data) {
        let num = 0;
        let that = this;
        for (let i = 0; i < data.length; i++) {
          if (data[i].productId) {
            num += data[i].numbers;
            if (!data[i].numbers){
              return false
            }
          } else {
            if (data.length > 1) {
              that.delVos(i);
              i--
            }
          }
        }
        return Boolean(num);
      },
      clearNum() {
        this.itemList = [];
        let obj = {numbers:1, productId: '', returnNumber: 0}
        this.itemList.push(obj);
      },
      addVos() {
        // this.checkList();
        let data = {
          numbers: 1,
          productId: '',
          returnNumber: 0
        };
        this.itemList.push(data);
        this.backupsList.push(JSON.parse(JSON.stringify(data)))
      },

      delVos(index) {
        this.itemList.splice(index, 1);
        this.backupsList.splice(index, 1)
      },


      setTip(num, text) {
        this.tip_num = num;
        this.infoTip = text
      },

      // 关闭
      closePopup(refresh) {
        this.$emit('listenToChild', {refresh: refresh})
      }
    },
  }
</script>

<style scoped>
  .pro_lab {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .line_item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    width: 100%;
  }

  .line_item:first-child {
    margin-top:0
  }

  .line .line_item > div {
    width: 29% !important;
  }

  .line .line_item > span {
    display: block;
    width: 30px;
  }

  .line .line_item i, .addlist {
    font-size: 25px;
    color: #6687f9;
    cursor: pointer;
  }

  .common_btn {
    font-size: 24px;
    cursor: pointer;
    color: #6687f9;
    margin-right: 5px;
  }

  .delSingle {
    color: #e40000 !important;
  }
</style>
